<template>
  <div class="bar-chart" ref="bar" :style="{'width':'50%','height':props.formItem.result.length * 40 + 100 + 'px'}"></div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import echarts from "@/utils/echarts";

const props = defineProps({
  formItem: {
    type: Object,
  }
})
const chartData = computed(()=>{return props.formItem.result.map(item=>{
    return {
      name: item.label,
      value: item.writerChoosedNum,
    }
  })
})
// 柱状图配置
let myBar = ref(null)
const bar = ref(null)
const getBarOption = () => {
  return{
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: "30%",
    },
    calculable: true,
    xAxis: [{
      show: false
    }],
    yAxis: [{
      type: 'category',
      data: chartData.value.map(item => item.name),
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        color: '#333333'
      }
    },
    {
      type: 'category',
      data: chartData.value.map(item => item.value),
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        color: '#333333'
      }
    }],
    series: [{
      type: 'bar',
      barWidth: 20,
      barGap: '10%',
      data: chartData.value.map(item => item.value),
      itemStyle: {
        color: function(){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);},
        borderRadius: 4,
      },
    }]
  }
}
onMounted(() => {
  myBar.value = echarts.init(bar.value)
  myBar.value.setOption(getBarOption())
  window.onresize = function() {
    myBar.value.resize();
  }
});
</script>
<style scoped lang='scss'>

</style>